#{extends 'main.html' /}
#{set title:'Give2Get - Profile' /}



    <!-- User Basic Info & Rating -->
    <div id="edit_user_info_container" class="white">

    #{form @Application.completeEditProfile()} 

        <div id="edit_user_info">
            <p class="title_profile">User Information</p>
            <!-- Basic User Info -->

            <span>Email</span>
            <br/>
            <span><input type="text" name="email" value="${user.getRegistration().getEmail()}"/></span>
            <br/>
            <br/>
            <span>First Name</span>
            <br/>
            <span><input type="text" name="firstName" tabindex="1" value="${user.getRegistration().getFirstname()}"/></span>
            <br/>
            <br/>
            <span>Last Name</span>
            <br/>
            <span><input type="text" name="lastName" tabindex="1" value="${user.getRegistration().getLastname()}"/></span>
            <br/>
            <br/>
            <input id="save_button" type="image" src="@{'/public/images/save.png'}" name="SignUp" value="Sign Up"/>
        </div>

        <div id="edit_skills">
            <p class="title_profile">Add Skills</p>
            <span>Title</span>
            <br/>
            <span><input type="text" id="title" size="60" name="title" /></span>
            <br/>
            <br/>
            <span>Description</span>
            <br/>
            <span><input type="text" name="description" id="description" size="60" tabindex="1"/></span>
            <br/>
            <br/>
            <img id="add_skill_button" src="@{'/public/images/add_skill.png'}" onClick="addSkill();" name="SignUp" value="Sign Up"/>
            <br/>
            <br/>
        </div>
        <div id="skill_list">
            <p class="title_profile">Skill Basket</p>
            <br/>
            <span><textarea id="skillList" name="skillList" cols="47" rows="6"  tabindex="1"></textarea></span>

        </div>
    #{/form}
    </div>


<script type="text/javascript">

function addSkill(){
	
	var title = document.getElementById('title').value;
	
	if( title.trim() !='')
	{
		document.getElementById('skillList').value += 'Title: '+document.getElementById('title').value+'\n';
		document.getElementById('skillList').value += 'Description: '+document.getElementById('description').value+'\n\n';
	
		document.getElementById('title').value = '';
		document.getElementById('description').value = '';
	}
}
</script>
